<template>
    <div>
        <view class="submitOrder">
            <div class="info">
                <div class="order-msg">
                    <div class="msg1">
                        <!-- <span
                        v-if="formData.rankType && formData.mode == '排位赛' | formData.mode == '定位赛' | formData.mode == '宝典'">{{
                            formData.rankType
                        }}</span>
                    <span v-if="formData.gameMode && formData.mode == '代币' |formData.mode == '宝典'">{{
                        formData.gameMode }}</span> -->

                        <span v-if="formData.beforeLevel && formData.mode == '定位赛'">{{ formData.beforeLevel }}</span>
                        <span v-if="formData.needGames && formData.mode == '定位赛'">定位赛{{ formData.needGames }}</span>

                        <!-- <span v-if="formData.currentTokens && formData.toTokens && formData.mode == '代币'">代币{{
                        formData.currentTokens
                        }}个-{{ formData.toTokens }}个</span> -->
                        <span v-if="formData.currentLevel && formData.toLevel && formData.mode == '通行证'">通行证{{
                            formData.currentLevel
                            }}级-{{ formData.toLevel }}级</span>
                        <span v-if="formData.selectPass && formData.mode == '通行证'">({{
                            formData.selectPass }})</span>
                        <!-- <span v-if="formData.hero">{{ formData.hero }}</span> -->
                        <span v-if="formData.currentTask && formData.toTask && formData.mode == '排位赛'">{{
                            formData.currentTask
                            }}-{{ formData.toTask }}</span>
                        <span v-if="formData.currentScore && formData.mode == '排位赛'">（已有{{ formData.currentScore
                            }}分）</span>
                        <!-- <span v-else-if="formData.currentTask">{{ formData.currentTask }}</span> -->
                        <span v-if="hero">指定英雄: {{ hero }}</span>
                    </div>
                    <!-- <div class="msg2">
                    <span v-if="formData.mingwenLevel && formData.heroCount">铭文{{ formData.mingwenLevel }}级 英雄数量{{
                        formData.heroCount }}个</span>
                    <span v-else-if="formData.mingwenLevel">铭文{{ formData.mingwenLevel }}级</span>
                </div> -->
                </div>
                <div class="preferred-price">
                    <div class="title">优选价</div>
                    <div class="price">
                        <span class="price-value-amount">{{ price }}</span> 元
                    </div>
                    <div class="time">{{ time }}小时</div>
                    <div class="tip">指定高级代练，安全高效，胜率保证，专区展示</div>
                    <image @click="showPricePicker" src="../../../../static/icons/edit.png"></image>
                </div>
            </div>
            <div class="login-mode">
                <div class="tab">账号密码登录</div>
                <div class="username">
                    <div class="label">游戏账号</div>
                    <div class="handle">
                        <input type="text" placeholder="请输入您的游戏账号" v-model="gameAccount">
                    </div>
                </div>
                <div class="username">
                    <div class="label">游戏密码</div>
                    <div class="handle">
                        <!-- YXLM 使用 password 类型 -->
                        <input type="password" placeholder="请输入您的游戏密码" v-model="gamePassword">
                    </div>
                </div>
                <div class="phone">
                    <div class="label">游戏角色</div>
                    <div class="handle">
                        <input type="text" placeholder="请输入您的游戏角色名" v-model="gameRole">
                    </div>
                </div>
                <div class="phone">
                    <div class="label">号主手机（必填）</div>
                    <div class="handle">
                        <input type="text" placeholder="请输入您的手机号" v-model="ownerPhone">
                    </div>
                </div>
                <div class="contact">
                    <div class="label">发单者联系方式（必填）</div>
                    <div class="handle">
                        <input type="text" placeholder="请输入发单者的联系方式" v-model="contactInfo">
                    </div>
                </div>
            </div>
            <div class="point-hero" v-if="formData.mode == '排位赛'">
                <div class="label">指定英雄（加价30%）</div>
                <div class="handle" @click="showHeroPicker">
                    <view class="selected-tag">
                        {{ hero || '请选择指定英雄' }}
                        <image src="../../../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <div class="special-task">
                <div class="label">特殊要求</div>
                <div class="handle" @click="showSpecialPicker">
                    <view class="selected-tag">
                        {{ '保证金/订单要求等' }}
                        <image src="../../../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <div class="footer">
                <div class="button" @click="submitOrder">发布订单</div>
            </div>
        </view>
        <!-- 优选价弹窗 -->
        <uni-popup ref="pricePopup" type="bottom">
            <view class="popup-content">
                <view>
                    <div class="level">
                        <span>价格（元）</span>
                        <input type="number" placeholder="请输入价格" v-model="price">
                    </div>
                    <div class="role">
                        <span>时限（小时）</span>
                        <input type="number" placeholder="请输入时限" v-model="time">
                    </div>
                </view>
                <view class="popup-footer2">
                    <span class="cancel" @click="hidePricePicker">取消</span>
                    <span class="confirm" @click="confirmPricePicker">确认</span>
                </view>
            </view>
        </uni-popup>
        <!-- 指定英雄弹窗 -->
        <uni-popup ref="heroPopup" type="bottom">
            <view class="popup-content">
                <HeroSelect :hero-list="heroTree" @select="selectHeroItem" />
            </view>
        </uni-popup>
        <!-- 特殊要求弹窗 -->
        <uni-popup ref="specialPopup" type="bottom">
            <view class="popup-content">
                <div class="title">特殊要求</div>
                <div class="server">
                    <div class="server-title">
                        服务保障
                    </div>
                    <div class="server-content">
                        <div class="server-content-item">
                            <div class="server-content-item-text">安全保证金</div>
                            <div class="server-content-item-value">
                                <input type="number" v-model="securityDeposit">
                            </div>
                            <div class="server-content-item-unit">元</div>
                        </div>
                        <div class="server-content-item">
                            <div class="server-content-item-text">效率保证金</div>
                            <div class="server-content-item-value">
                                <input type="number" v-model="efficiencyDeposit">
                            </div>
                            <div class="server-content-item-unit">元</div>
                        </div>
                    </div>
                </div>
                <div class="order-require">
                    <div class="order-require-title">订单要求</div>
                    <scroll-view scroll-y class="order-require-content">
                        <div class="order-require-content-item">1、未经同意请勿动用账号点卷、物品，不要联系或回复好友信息</div>
                        <div class="order-require-content-item">2、请勿使用外挂，不允许打广告、挂机、恶意骂人等恶意行为</div>
                    </scroll-view>
                </div>
                <view class="popup-footer" @click="hideSpecialPicker">确定</view>
            </view>
        </uni-popup>
    </div>
</template>

<script>
import HeroSelect from "../../../../components/selectHeroForm/index.vue";
// import { createOrder, checkText, uploadFile, getUserInfo } from '@/config/api'; // 假设的 API 导入

export default {
    components: {
        HeroSelect
    },
    data() {
        return {
            // 从路由接收的表单数据
            formData: {
                server: '',
                mode: '',
                selectPass: '',
                currentLevel: '',
                toLevel: '',
                currentTask: '',
                toTask: '',
                currentScore: '',
                needGames: '',
                beforeLevel: '',
                // 保留 YXLM 中可能存在的字段，即使 WWQY DL 不直接使用
                gameMode: '',
                currentTokens: '',
                toTokens: '',
                rankType: '',
            },
            // 价格和时间 (与 YXLM 保持一致，可能由 formData 初始化)
            price: '1', // 默认值或由 onLoad 设置
            time: '2', // 默认值或由 onLoad 设置
            // 登录信息 (合并 YXLM 和 WWQY 的字段)
            gameAccount: '',
            gamePassword: '',
            gameRole: '',
            contactInfo: '',
            ownerPhone: '', // WWQY 新增
            // 英雄选择 (与 YXLM 保持一致)
            hero: '',
            heroTree: [
                // WWQY 的英雄列表
                { "text": "铁壁", "value": "铁壁" }, { "text": "零", "value": "零" }, { "text": "捷风", "value": "捷风" },
                { "text": "幽影", "value": "幽影" }, { "text": "不死鸟", "value": "不死鸟" }, { "text": "雷兹", "value": "雷兹" },
                { "text": "贤者", "value": "贤者" }, { "text": "猎枭", "value": "猎枭" }, { "text": "蝰蛇", "value": "蝰蛇" },
                { "text": "炼狱", "value": "炼狱" }, { "text": "芮娜", "value": "芮娜" }, { "text": "奇乐", "value": "奇乐" },
                { "text": "海神", "value": "海神" }, { "text": "星礈", "value": "星礈" }, { "text": "斯凯", "value": "斯凯" },
                { "text": "黑梦", "value": "黑梦" }, { "text": "霓虹", "value": "霓虹" }, { "text": "盖可", "value": "盖可" },
                { "text": "KAY/O", "value": "KAY/O" }, { "text": "夜露", "value": "夜露" }, { "text": "尚勃勒", "value": "尚勃勒" },
                { "text": "钢索", "value": "钢索" }, { "text": "壹决", "value": "壹决" }
            ],
            // 特殊要求 (与 YXLM 保持一致)
            securityDeposit: 5,
            efficiencyDeposit: 5,
            // YXLM 中的 checkbox 字段，WWQY DL 不直接使用但保留结构
            compensatePoints: false,
            penalty: false,
        };
    },
    onLoad(options) {
        if (options.formData) {
            try {
                const parsedData = JSON.parse(decodeURIComponent(options.formData));
                this.formData = { ...this.formData, ...parsedData }; // 合并路由数据
                console.log("Received formData (WWQY DL):", this.formData);
                // 从 formData 中获取建议价格和时间来初始化本地 price 和 time
                this.price = this.formData.suggestedPrice || '1';
                this.time = this.formData.estimatedTime || '2';
            } catch (e) {
                console.error("Failed to parse formData (WWQY DL):", e);
                uni.showToast({ title: '加载订单信息失败', icon: 'none' });
                // Set default price/time on error
                this.price = '1';
                this.time = '2';
            }
        } else {
            console.warn("No formData found in route params (WWQY DL).");
            // Set default price/time if no formData
            this.price = '1';
            this.time = '2';
        }
        // 可以考虑预填联系方式
        // this.prefillContactInfo();
    },
    methods: {
        // --- 弹窗方法 (复用 YXLM) ---
        showPopup(refName) {
            if (this.$refs[refName]) {
                this.$refs[refName].open();
            } else {
                console.error(`Popup ref '${refName}' not found or not ready.`);
                uni.showToast({ title: '组件加载中', icon: 'none' });
            }
        },
        hidePopup(refName) {
            if (this.$refs[refName]) {
                this.$refs[refName].close();
            } else {
                console.error(`Popup ref '${refName}' not found or not ready.`);
            }
        },

        showPricePicker() {
            // 注意：YXLM 实现中没有用临时变量，直接修改 data
            this.showPopup('pricePopup');
        },
        hidePricePicker() {
            // YXLM 的 hidePricePicker 只关闭弹窗，不重置值
            this.hidePopup('pricePopup');
        },
        confirmPricePicker() {
            // 价格和时间通过 v-model 直接绑定，确认时只需关闭弹窗
            // 可以加校验
            if (!this.price || isNaN(Number(this.price)) || Number(this.price) <= 0) {
                uni.showToast({ title: '请输入有效价格', icon: 'none' }); return;
            }
            if (!this.time || isNaN(Number(this.time)) || Number(this.time) <= 0) {
                uni.showToast({ title: '请输入有效时限', icon: 'none' }); return;
            }
            this.hidePopup('pricePopup');
        },

        showHeroPicker() {
            this.showPopup('heroPopup');
        },
        hideHeroPicker() {
            // YXLM 的 HeroSelect 组件自带关闭逻辑？这里只写关闭
            this.hidePopup('heroPopup');
        },
        selectHeroItem(item) {
            this.hero = item.text;
            // YXLM 中是 HeroSelect 内部处理关闭，外部不需要调用 hide
            // this.hideHeroPicker();
        },

        showSpecialPicker() {
            this.showPopup('specialPopup');
        },
        hideSpecialPicker() {
            // YXLM 只关闭弹窗，数据通过 v-model 绑定
            this.hidePopup('specialPopup');
        },

        // --- 表单校验 (合并 YXLM 和 WWQY) ---
        validateForm() {
            if (!this.gameAccount) { uni.showToast({ title: '请输入游戏账号', icon: 'none' }); return false; }
            if (!this.gamePassword) { uni.showToast({ title: '请输入游戏密码', icon: 'none' }); return false; }
            if (!this.gameRole) { uni.showToast({ title: '请输入游戏角色名', icon: 'none' }); return false; }
            if (!this.ownerPhone) { uni.showToast({ title: '请输入号主手机', icon: 'none' }); return false; } // WWQY 新增校验
            if (!/^1[3-9]\d{9}$/.test(this.ownerPhone)) { uni.showToast({ title: '请输入正确的手机号', icon: 'none' }); return false; } // 手机号格式
            if (!this.contactInfo) { uni.showToast({ title: '请输入联系方式', icon: 'none' }); return false; }
            // 可根据需要添加价格/时间校验
            if (!this.price || isNaN(Number(this.price)) || Number(this.price) <= 0) {
                uni.showToast({ title: '请输入有效价格', icon: 'none' }); return false;
            }
            if (!this.time || isNaN(Number(this.time)) || Number(this.time) <= 0) {
                uni.showToast({ title: '请输入有效时限', icon: 'none' }); return false;
            }
            return true;
        },

        // --- 内容安全检查 (复用 YXLM 逻辑) ---
        async checkContent() {
            const contentToCheck = [
                this.gameAccount,
                this.gamePassword, // 密码通常不检查，但 YXLM 包含了
                this.gameRole,
                this.ownerPhone,
                this.contactInfo,
                this.hero,
            ].filter(text => !!text).join(',');

            if (!contentToCheck) return true;

            console.warn("内容安全检查 (checkText API) 需要实现.");
            // 实际调用 checkText API
            // try { ... } catch { ... }
            return true; // 模拟检查通过
        },

        // --- 提交订单 (合并 YXLM 和 WWQY) ---
        async submitOrder() {
            if (!this.validateForm()) return;

            const isContentSafe = await this.checkContent();
            if (!isContentSafe) return;

            uni.showLoading({ title: '正在发布...' });

            // 构建提交数据
            const orderPayload = {
                ...this.formData, // 包含路由传递的订单配置信息
                boost_type: 'DL', // 代练类型
                game_name: 'WWQY', // 游戏名
                game_account: this.gameAccount,
                game_password: this.gamePassword,
                game_role: this.gameRole,
                owner_phone: this.ownerPhone, // 号主手机
                contact_info: this.contactInfo, // 发单人联系方式
                price: parseFloat(this.price),
                time_limit: parseInt(this.time),
                specified_hero: this.hero || null, // 指定英雄
                security_deposit: Number(this.securityDeposit) || 0,
                efficiency_deposit: Number(this.efficiencyDeposit) || 0,
                // YXLM 特有字段，如果 WWQY 不需要可以移除
                // compensate_points: this.compensatePoints,
                // penalty_enabled: this.penalty,
                // 可以动态生成标题
                title: `无畏契约代练 ${this.formData.currentTask || ''}${this.formData.currentTask ? '-' : ''}${this.formData.toTask || ''} ${this.formData.currentLevel || ''}${this.formData.currentLevel ? '级-' : ''}${this.formData.toLevel || ''}${this.formData.toLevel ? '级' : ''}`.trim(),
            };

            // 清理无用或空数据
            delete orderPayload.suggestedPrice;
            delete orderPayload.estimatedTime;
            Object.keys(orderPayload).forEach(key => {
                if (orderPayload[key] === '' || orderPayload[key] === null || orderPayload[key] === undefined) {
                    // 保留保证金的 0 值
                    if (key !== 'security_deposit' && key !== 'efficiency_deposit') {
                        delete orderPayload[key];
                    }
                }
            });

            console.log("准备提交的订单数据 (WWQY DL):", orderPayload);
            console.warn("订单提交 API (createOrder) 需要实现.");

            // 模拟 API 调用
            setTimeout(() => {
                uni.hideLoading();
                uni.showToast({ title: '订单发布成功 (模拟)', icon: 'success' });
                // 可跳转
                // uni.redirectTo({ url: '/pages/OrderList/index' });
            }, 1500);

            // 实际 API 调用示例
            // try {
            //     const res = await createOrder(orderPayload);
            //     uni.hideLoading();
            //     if (res.code === 200) {
            //        ...
            //     } else {
            //        ...
            //     }
            // } catch (error) {
            //    ...
            // }
        }
    }
};
</script>

<style scoped>
/* 复用 YXLM 的样式，根据需要微调 */
.submitOrder {
    width: 100%;
    min-height: 100vh;
    background-color: #eee;
    padding-bottom: 100rpx;
}

.info {
    padding: 40rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin-bottom: 10rpx;
    /* Add margin bottom */
}

.order-msg {
    display: flex;
    flex-direction: column;
}

.order-msg .msg1 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20rpx;
    word-wrap: break-word;
    line-height: 1.5;
}

.order-msg .msg1 span {
    margin-right: 10rpx;
}

.preferred-price {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 10px -3px rgba(0, 0, 0, 0.1);
    margin-top: 40rpx;
    position: relative;
    border-radius: 7px;
    border-bottom: 5px solid #57b1ff;
}

.preferred-price .title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20rpx;
}

.preferred-price .price {
    display: flex;
    align-items: baseline;
    /* Align baseline */
    font-size: 13px;
    font-weight: 400;
}

.preferred-price .price .price-value-amount {
    font-size: 20px;
    color: red;
    font-weight: bold;
    margin-right: 5rpx;
}

.preferred-price .time {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
    margin-top: 5rpx;
}

.preferred-price .tip {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
    color: #aaa;
    margin-top: 30rpx;
    line-height: 1.4;
}

.preferred-price image {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    width: 40rpx;
    height: 40rpx;
    cursor: pointer;
}

.login-mode {
    margin-top: 10rpx;
    padding: 40rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

.login-mode .tab {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 40rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #eee;
}

.login-mode .username,
.login-mode .phone,
.login-mode .contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
    padding: 10rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    font-size: 14px;
}

.login-mode .username:last-child,
.login-mode .phone:last-child,
.login-mode .contact:last-child {
    border-bottom: none;
    margin-bottom: 0;
}


.login-mode .label {
    width: auto;
    /* Auto width for label */
    flex-shrink: 0;
    /* Prevent shrinking */
    margin-right: 20rpx;
    color: #333;
}

.login-mode .handle {
    flex-grow: 1;
    /* Handle takes remaining space */
    display: flex;
    justify-content: flex-end;
}

.login-mode input {
    text-align: right;
    font-size: 14px;
    color: #333;
    width: 100%;
}

.login-mode input::placeholder {
    color: #aaa;
}


.point-hero,
.special-task {
    margin-top: 10rpx;
    padding: 30rpx 40rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-bottom: 1rpx solid #f0f0f0;
}

.point-hero:last-of-type,
.special-task:last-of-type {
    border-bottom: none;
}

.point-hero .label,
.special-task .label {
    font-size: 15px;
    color: #333;
}

.point-hero .handle,
.special-task .handle {
    font-size: 14px;
    color: #666;
    cursor: pointer;
}

.selected-tag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 50rpx;
    border-radius: 8rpx;
    font-size: 14px;
    color: #666;
}

.selected-tag image {
    width: 24rpx;
    height: 24rpx;
    margin-left: 10rpx;
}

/* 弹窗样式 */
.popup-content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
}

.popup-content .title {
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 30rpx 20rpx 20rpx;
    box-sizing: border-box;
    border-bottom: 1rpx solid #eee;
}

.server,
.order-require,
.special-require {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20rpx 40rpx 40rpx;
    box-sizing: border-box;
}

.server-title,
.order-require-title,
.special-require-title {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 20rpx;
    margin-bottom: 10rpx;
    border-bottom: 1rpx solid #f0f0f0;
}

.server-content,
.order-require-content {
    /* display: flex; */
    /* Use block for scroll-view */
    max-height: 300rpx;
    /* overflow-y: auto; -> Applied to scroll-view */
    /* flex-direction: column; */
    padding: 0 10rpx;
    box-sizing: border-box;
}

/* Style scroll-view */
.order-require-content {
    display: block;
    /* Ensure scroll-view is block */
    width: 100%;
}

.server-content-item,
.order-require-content-item {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-top: 15rpx;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.server-content-item-text {
    width: 30%;
    flex-shrink: 0;
}

.server-content-item-value {
    color: #333;
    flex-grow: 1;
    margin: 0 10rpx;
}

.server-content-item-value input {
    width: 100%;
    border: 1rpx solid #ddd;
    padding: 5rpx 10rpx;
    border-radius: 5rpx;
    font-size: 13px;
}

.server-content-item-unit {
    text-align: right;
    color: #333;
    width: 50rpx;
    flex-shrink: 0;
}

/* YXLM special require content */
.special-require-content {
    display: flex;
    align-items: center;
    padding: 0 10rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    font-size: 14px;
    color: #333;
}

.special-require-content checkbox {
    margin-right: 15rpx;
    transform: scale(.9);
}

.level,
.role {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 40rpx;
    box-sizing: border-box;
    border-bottom: 1rpx solid #eee;
}

.level span,
.role span {
    color: #333;
    font-size: 15px;
}

.level input,
.role input {
    width: 60%;
    text-align: right;
    font-size: 15px;
    color: #333;
    border: none;
}


.popup-scroll {
    max-height: 60vh;
    overflow-y: auto;
}

.popup-item {
    padding: 25rpx 40rpx;
    font-size: 15px;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    text-align: center;
}

.popup-item:last-child {
    border-bottom: none;
}


.popup-footer {
    width: 100%;
    text-align: center;
    font-size: 16px;
    padding: 25rpx;
    color: #fff;
    background: #57b1ff;
    border-top: 1px solid #eee;
    box-sizing: border-box;
    cursor: pointer;
}

.popup-footer:active {
    background-color: #4a9cec;
}

.popup-footer2 {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #999;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

.popup-footer2 .cancel,
.popup-footer2 .confirm {
    display: block;
    width: 50%;
    padding: 25rpx;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
    cursor: pointer;
}

.popup-footer2 .cancel {
    color: #198dda;
}

.popup-footer2 .cancel:active {
    background-color: #f2f2f2;
}

.popup-footer2 .confirm {
    background-color: #198dda;
    color: #fff;
}

.popup-footer2 .confirm:active {
    background-color: #157ab3;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 86rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #57b1ff;
    cursor: pointer;
}

.footer .button:active {
    background-color: #4a9cec;
}

/* Add styles for HeroSelect if needed, e.g. using /deep/ */
/* .popup-content /deep/ .hero-select-container { ... } */
</style>